<template>
  <el-autocomplete class="top-search" popper-class="my-autocomplete" v-model="value" :fetch-suggestions="querySearch" :placeholder="$t('search')" @select="handleSelect">
    <i class="el-icon-search el-input__icon" slot="prefix"></i>
    <template slot-scope="{ item }">
      <div class="menu-row">
        <i :class="[item[iconKey], 'icon']"></i>
        <div class="name">{{ item[labelKey] }}</div>
      </div>
      <div class="addr">{{ item[pathKey] }}</div>
    </template>
  </el-autocomplete>
</template>

<script>
import config from '../sidebar/config.js';
import { mapGetters } from 'vuex';
import { getToken } from '@/util/auth';
import { largeScreenConfigList } from '@/page/index/sidebar/largeScreenConfigList.js';
export default {
  data() {
    return {
      config: config,
      value: '',
      menuList: []
    };
  },
  created() {
    this.getMenuList();
  },

  watch: {
    menu() {
      this.getMenuList();
    }
  },
  computed: {
    labelKey() {
      return this.website.menu.props.label || this.config.propsDefault.label;
    },
    pathKey() {
      return this.website.menu.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.website.menu.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.website.menu.props.children || this.config.propsDefault.children;
    },
    ...mapGetters(['menu', 'website'])
  },
  methods: {
    getMenuList() {
      const findMenu = (list) => {
        for (let i = 0; i < list.length; i++) {
          const ele = Object.assign({}, list[i]);
          if (this.validatenull(ele[this.childrenKey])) {
            this.menuList.push(ele);
          } else {
            findMenu(ele[this.childrenKey]);
          }
        }
      };
      this.menuList = [];
      findMenu(this.menu);
    },
    querySearch(queryString, cb) {
      var restaurants = this.menuList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
      };
    },
    handleSelect(item) {
      const that = this;
      that.value = '';
      // 大屏路径 打开新页面
      if (item[that.pathKey].startsWith(`${that.website.avueDataUrl}`)) {
        if (largeScreenConfigList.includes(item.name)) {
          that.$emit('openDvpDialog', item);
        } else {
          that.formatterKanBanPath(item[that.pathKey]);
          return;
        }
      }
      that.$router.push({
        path: this.$router.$avueRouter.getPath(
          {
            name: item[that.labelKey],
            src: item[that.pathKey]
          },
          item.meta
        ),
        query: item.query
      });
    },
    formatterKanBanPath(path) {
      let siteId = localStorage.getItem('saber-siteId');
      let tenantId = JSON.parse(localStorage.getItem('saber-tenantId') || '{}').content;
      let userId = JSON.parse(localStorage.getItem('saber-userInfo') || '{}').content.user_id;
      let token = 'bearer ' + getToken();
      path = path + '?siteId=' + siteId + '&tenantId=' + tenantId + '&userId=' + userId + '&token=' + token;
      window.open(path);
    }
  }
};
</script>

<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .menu-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .icon {
        margin-right: 5px;
      }

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    .addr {
      padding-top: 5px;
      width: 100%;
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
